<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级菜单-基本功能</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
            /* transition: 1s; */
        }
        a,img{
            border: 0;
            text-decoration: none;
        }
        body{
            font: 12px/180% Arial, Helvetica, sans-serif;
        }
        div.sdmenu{
            width: 9.375rem;
            margin: 0 auto;
            font-family: "arial, helvetica, sans-serif";
            font-size: 0.75rem;
            padding-bottom: 0.625rem;
            background-color: #1477fe;
            color: #FFFFFF;
            border-radius: 0.625rem;
        }
        div.sdmenu div{
            background-color: #1477fe;
            overflow: hidden;
        }
        div.sdmenu div:first-child{
            color: #ff0000;
        }
        div.sdmenu div.collapsed{
            height: 1.5625rem;
        }
        div.sdmenu div span{
            display: block;
            height: 0.9375rem;
            line-height: 0.9375rem;
            overflow: hidden;
            padding: 0.3125rem 1.5625rem;
            font-weight: bold;
            color: white;
            cursor: pointer;
            border-bottom: 1px solid #e4e4e4;
        }
        div.sdmenu div a{
            display: block;
            border-bottom: 1px solid #e4e4e4;
            padding: 0.3125rem;
            color: #576b95;
            background-color: #F5F5F5;
        }
        div.sdmenu div a:hover{
            background-color: #576b95;
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div id="my_menu" class="sdmenu">
        <div>
            <span class="menuSpan">在线工具</span>
            <a href="#">图像优化</a>
            <a href="#">收藏夹图标生成</a>
            <a href="#">邮件</a>
            <a href="#">htaccess密码</a>
            <a href="#">梯度图像</a>
            <a href="#">按钮生成器</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">支持我们</span>
            <a href="#">推荐我们</a>
            <a href="#">链接我们</a>
            <a href="#">网络资源</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">合作伙伴</span>
            <a href="#">工具包</a>
            <a href="#">css驱动</a>
            <a href="#">css例子</a>
        </div>
        <div class="collapsed">
            <span class="menuSpan">测试电流</span>
            <a href="#">Current  or not</a>
            <a href="#">Current  or not</a>
            <a href="#">Current  or not</a>
            <a href="#">Current  or not</a>
        </div>
    </div>
</body>
</html>
</html>
<script src="js/move.js"></script>
<script>
    window.onload = function(){
        /*
            我们的每一个菜单都是一个div
                当div具有 collapsed 这个类时，div就是折叠的状态
                当div没有这个类时，div就是展开的状态
        */

        // 获取span
        var menuSpan = document.querySelectorAll(".menuSpan");

        // 定义一个变量，来保存当前打开的菜单
        var openDiv = menuSpan[0].parentNode;
        // 遍历box
        for(var i=0; i<menuSpan.length;i++){

            // 给每个 box 绑定一个单击响应函数
            menuSpan[i].onclick = function(){

                // classList.toggle 如果 div中有collapsed，则添加，没有则删除 
                // 此方法可以直接实现，不需要在引进外部 js 文件，调用自己创建的函数方法
                // this.parentNode.classList.toggle("collapsed");


                // this代表我当前点击的span
                // 获取当前span 的父元素
                var parentDiv = this.parentNode;

                // 关闭 parentDiv
                toggleClass(parentDiv,"collapsed");

                // 判断此时openDiv 和 parentDiv 是否相同
                if(openDiv != parentDiv && !hasClass(openDiv,"collapsed")){

                    // 打开菜单以后应该关闭之前打开的菜单
                    // 为了可以同一处理动画过渡效果，我们希望在这将addClass 改为toggleClass
                    // addClass(openDiv,"collapsed");

                    // 此处 toggleClass() 不需要有移出的功能
                    toggleClass(openDiv,"collapsed");
                }

                

                // 修改openDiv 为当前打开的菜单
                openDiv = parentDiv;
            }
        }

    };
</script>